<template>
  <dv-border-box-12 class="full_screen" style="padding: 0px;">
    <div style="height: 100%;width: 100%;display: flex;flex-direction: column;overflow: hidden;">
      <div style="display: flex;margin-top: 30px;">
        <div
          style="font-family: 微软雅黑;cursor: pointer;;margin-left: 15px;display: flex;color: #40C5F1;text-align: center;margin-right: 20px;font-weight: bold;font-size: 22px;">
          <div v-for="menu in leftMenuList" :key="menu.label"
            @click='clickRouter(menu.route, menu.index)'
            :class="activeName == menu.route ? 'menu_top_active' : 'menu_top_normal'">
            {{ menu.label }}</div>
        </div>
        <div style="flex:1"></div>
        <div
          style="font-family: 微软雅黑;cursor: pointer;margin-left: 15px;display: flex;color: #40C5F1;text-align: center;font-weight: bold;font-size: 22px;">
          <div v-for="menu in rightMenuList" :key="menu.label"
            @click='clickRouter(menu.route, menu.index)'
            :class="activeName == menu.route ? 'menu_top_active' : 'menu_top_normal'">
            {{ menu.label }}</div>
        </div>
      </div>
      <router-view style="flex: 1;margin-top: 5px;"></router-view>

    </div>
    <BackBtn v-if="!isBoard" />
    <!-- <dv-loading v-if="loading">Loading...</dv-loading> -->
  </dv-border-box-12>
</template>

<script>
import HomeMenu from '@/components/HomeMenu';
import BackBtn from '@/components/BackBtn';

import {
  menuList0,
  menuList1,
  menuList2,
  menuList3,
  menuList4,
  menuList5,
} from './menu';

export default {
  components: {
    HomeMenu,
    BackBtn,
  },
  data() {
    return {
      activeName: '',
      menuList: menuList0,
      leftMenuList: [],
      rightMenuList: [],
      isBoard: false,
      menuArray: [
        menuList0,
        menuList1,
        menuList2,
        menuList3,
        menuList4,
        menuList5,
      ],
    };
  },
  watch: {
    $route(to, from) {
      console.log('$route', to.name);
      this.isBoard = to.name == 'board';

      this.menuChangedByRoute(to.name);
    },
  },

  mounted() {
    this.isBoard = this.$route.name == 'board';
    this.menuChangedByRoute(this.$route.name);
  },
  methods: {
    menuChangedByRoute(routeName) {
      this.activeName = routeName;
      if (this.isBoard) {
        this.menuList = this.menuArray[0];
        var halfSize = Math.ceil(this.menuList.length / 2 + '');
        this.leftMenuList = this.menuList.slice(0, halfSize);
        this.rightMenuList = this.menuList.slice(halfSize);
        return;
      }

      let currMenus = null;
      for (let i = 0; i < this.menuArray.length; i++) {
        if (i == 0) {
          continue;
        }

        let menus = this.menuArray[i];
        const menu = menus.filter((item) => item.route == routeName)[0];
        if (!menu) {
          continue;
        }
        currMenus = menus;
      }

      this.menuList = currMenus ? currMenus : menuList0;
      var halfSize = Math.ceil(this.menuList.length / 2 + '');
      this.leftMenuList = this.menuList.slice(0, halfSize);
      this.rightMenuList = this.menuList.slice(halfSize);
      console.log('this.leftMenuList ', halfSize, this.leftMenuList);
    },

    clickRouter(name, index) {
      console.log('index', index);
      if (name) {
        this.$router.push({ name });
        // this.menuList = this.menuArray[index];
        // var halfSize = Math.ceil(this.menuList.length / 2 + '');
        // this.leftMenuList = this.menuList.slice(0, halfSize);
        // this.rightMenuList = this.menuList.slice(halfSize, this.menuList.lenth);
        // console.log('this.menuArray ', this.menuArray);
        // console.log('this.leftMenuList ', halfSize, this.leftMenuList);
      }
    },
  },
};
</script>
<style>
.board_title_left {
  background: url('~assets/board_title_left.png') no-repeat;
  background-size: 100% 100%;
  height: 50px;
  width: 260px;
}

.full_screen > .border-box-content {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.menu_top_active {
  background: url('~assets/menu_top_active.png') no-repeat;
  background-size: 100% 100%;
  height: 50px;
  line-height: 50px;
  width: 180px;
  font-size: 15px;
}

.menu_top_normal {
  background: url('~assets/menu_top_normal.png') no-repeat;
  background-size: 100% 100%;
  height: 50px;
  line-height: 50px;
  width: 180px;
  font-size: 15px;
}
</style>